<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Knob</h1>
        <p>Knob is a form component to define number inputs with a dial.</p>
    </div>
    <app-demoActions github="knob" stackblitz="knob-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <div class="grid formgrid text-center">
            <div class="field col-12 md:col-4">
                <h5>Basic</h5>
                <p-knob [(ngModel)]="value1"></p-knob>
            </div>
            <div class="field col-12 md:col-4">
                <h5>Readonly</h5>
                <p-knob [(ngModel)]="value2" [readonly]="true"></p-knob>
            </div>
            <div class="field col-12 md:col-4">
                <h5>Disabled</h5>
                <p-knob [(ngModel)]="value3" [disabled]="true"></p-knob>
            </div>
            <div class="field col-12 md:col-4">
                <h5 class="mt-3">Min/Max</h5>
                <p-knob [(ngModel)]="value4" [min]="-50" [max]="50"></p-knob>
            </div>
            <div class="field col-12 md:col-4">
                <h5 class="mt-3">Step</h5>
                <p-knob [(ngModel)]="value5" [step]="10"></p-knob>
            </div>
            <div class="field col-12 md:col-4">
                <h5 class="mt-3">Template</h5>
                <p-knob [(ngModel)]="value6" valueTemplate="{value}%"></p-knob>
            </div>
            <div class="field col-12 md:col-4">
                <h5 class="mt-3">Stroke</h5>
                <p-knob [(ngModel)]="value7" [strokeWidth]="5"></p-knob>
            </div>
            <div class="field col-12 md:col-4">
                <h5 class="mt-3">Size</h5>
                <p-knob [(ngModel)]="value8" [size]="200"></p-knob>
            </div>
            <div class="field col-12 md:col-4">
                <h5 class="mt-3">Color</h5>
                <p-knob [(ngModel)]="value9" valueColor="SlateGray" rangeColor="MediumTurquoise"></p-knob>
            </div>
        </div>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;KnobModule&#125; from 'primeng/knob';
</app-code>
            <h5>Getting Started</h5>
            <p>Knob is an input component and used with the standard <i>ngModel</i> directive.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-knob [(ngModel)]="value"&gt;&lt;/p-knob&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
value: number = 0;
</app-code>

            <h5>Minimum and Maximum</h5>
            <p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-knob [(ngModel)]="value" [min]="-50" [max]="50"&gt;&lt;/p-knob&gt;
</app-code>

            <h5>Step</h5>
            <p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-knob [(ngModel)]="value" valueColor="SlateGray" rangeColor="MediumTurquoise"&gt;&lt;/p-knob&gt;
</app-code>

            <h5>Size</h5>
            <p>Default size of the Knob is 100 pixels for width and height, use the <i>size</i> property to customize it per your requirements.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-knob [(ngModel)]="value" [size]="200"&gt;&lt;/p-knob&gt;
</app-code>

                <h5>Properties</h5>
				<div class="doc-tablewrapper">
					<table class="doc-table">
						<thead>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Default</th>
                                <th>Description</th>
                            </tr>
						</thead>
						<tbody>
                            <tr>
                                <td>size</td>
                                <td>number</td>
                                <td>100</td>
                                <td>Size of the component in pixels.</td>
                            </tr>
							<tr>
                                <td>disabled</td>
                                <td>boolean</td>
                                <td>false</td>
                                <td>When present, it specifies that the component should be disabled.</td>
                            </tr>
							<tr>
                                <td>readonly</td>
                                <td>boolean</td>
                                <td>false</td>
                                <td>When present, it specifies that the component value cannot be edited.</td>
                            </tr>
							<tr>
                                <td>step</td>
                                <td>number</td>
                                <td>null</td>
                                <td>Step factor to increment/decrement the value.</td>
                            </tr>
							<tr>
                                <td>min</td>
                                <td>number</td>
                                <td>0</td>
                                <td>Mininum boundary value.</td>
                            </tr>
							<tr>
                                <td>max</td>
                                <td>number</td>
                                <td>100</td>
                                <td>Maximum boundary value.</td>
                            </tr>
							<tr>
                                <td>valueColor</td>
                                <td>string</td>
                                <td>null</td>
                                <td>Background of the value.</td>
                            </tr>
							<tr>
                                <td>rangeColor</td>
                                <td>number</td>
                                <td>null</td>
                                <td>Background color of the range.</td>
                            </tr>
							<tr>
                                <td>textColor</td>
                                <td>number</td>
                                <td>null</td>
                                <td>Color of the value text.</td>
                            </tr>
							<tr>
                                <td>strokeWidth</td>
                                <td>number</td>
                                <td>14</td>
                                <td>Width of the knob stroke.</td>
                            </tr>
							<tr>
                                <td>showValue</td>
                                <td>boolean</td>
                                <td>true</td>
                                <td>Whether the show the value inside the knob.</td>
                            </tr>
							<tr>
                                <td>valueTemplate</td>
                                <td>string</td>
                                <td>&#123;value&#125;</td>
                                <td>Template string of the value.</td>
                            </tr>
                            <tr>
                                <td>style</td>
                                <td>object</td>
                                <td>null</td>
                                <td>Inline style of the component.</td>
                            </tr>
                            <tr>
                                <td>styleClass</td>
                                <td>string</td>
                                <td>null</td>
                                <td>Style class of the component.</td>
                            </tr>
						</tbody>
					</table>
				</div>

				<h5>Events</h5>
				<div class="doc-tablewrapper">
					<table class="doc-table">
						<thead>
                            <tr>
                                <th>Name</th>
                                <th>Parameters</th>
                                <th>Description</th>
                            </tr>
						</thead>
						<tbody>
                            <tr>
                                <td>onChange</td>
                                <td>value: New value </td>
                                <td>Callback to invoke when the value changes.</td>
                            </tr>
						</tbody>
					</table>
				</div>

				<h5>Styling</h5>
				<p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming</a> page.</p>
				<div class="doc-tablewrapper">
					<table class="doc-table">
						<thead>
                            <tr>
                                <th>Name</th>
                                <th>Element</th>
                            </tr>
						</thead>
						<tbody>
                            <tr>
                                <td>p-knob</td>
                                <td>Container element.</td>
                            </tr>
                            <tr>
                                <td>p-knob-text</td>
                                <td>Text element.</td>
                            </tr>
                            <tr>
                                <td>p-knob-value</td>
                                <td>Value element.</td>
                            </tr>
                            <tr>
                                <td>p-knob-text</td>
                                <td>Text element.</td>
                            </tr>
						</tbody>
					</table>
				</div>
                
            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/knob" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-knob-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
            
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="grid formgrid text-center"&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;h5&gt;Basic&lt;/h5&gt;
        &lt;p-knob [(ngModel)]="value1"&gt;&lt;/p-knob&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;h5&gt;Readonly&lt;/h5&gt;
        &lt;p-knob [(ngModel)]="value2" [readonly]="true"&gt;&lt;/p-knob&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;h5&gt;Disabled&lt;/h5&gt;
        &lt;p-knob [(ngModel)]="value3" [disabled]="true"&gt;&lt;/p-knob&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;h5 class="mt-3"&gt;Min/Max&lt;/h5&gt;
        &lt;p-knob [(ngModel)]="value4" [min]="-50" [max]="50"&gt;&lt;/p-knob&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;h5 class="mt-3"&gt;Step&lt;/h5&gt;
        &lt;p-knob [(ngModel)]="value5" [step]="10"&gt;&lt;/p-knob&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;h5 class="mt-3"&gt;Template&lt;/h5&gt;
        &lt;p-knob [(ngModel)]="value6" valueTemplate="&#123;value&#125;%"&gt;&lt;/p-knob&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;h5 class="mt-3"&gt;Stroke&lt;/h5&gt;
        &lt;p-knob [(ngModel)]="value7" [strokeWidth]="5"&gt;&lt;/p-knob&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;h5 class="mt-3"&gt;Size&lt;/h5&gt;
        &lt;p-knob [(ngModel)]="value8" [size]="200"&gt;&lt;/p-knob&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;h5 class="mt-3"&gt;Color&lt;/h5&gt;
        &lt;p-knob [(ngModel)]="value9" valueColor="SlateGray" rangeColor="MediumTurquoise"&gt;&lt;/p-knob&gt;
    &lt;/div&gt;
&lt;/div&gt;
</app-code>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class KnobDemo &#123;

    value1: number = 0;

    value2: number = 50;

    value3: number = 75;

    value4: number = 10;

    value5: number = 40;

    value6: number = 60;

    value7: number = 40;

    value8: number = 60;

    value9: number = 50;
    
&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-knob-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>